<template>
  <div class="workbench">
    <div class="income-container">
      <div class="left-wrapper">
        <p class="title">数据</p>
        <div class="pard-data">
          <div class="item">
            <span class="label">学生主页</span>
            <span class="value">123456</span>
          </div>
          <div class="item">
            <span class="label">数据2</span>
            <span class="value">123456</span>
          </div>
          <div class="item">
            <span class="label">数据3</span>
            <span class="value">123456</span>
          </div>
          <div class="item">
            <span class="label">数据4</span>
            <span class="value">123456</span>
          </div>
        </div>
      </div>
      <div class="right-wrapper">
        <p class="quick-entry-title">快捷入口</p>
        <div class="fast-enter">
          <div class="item">
            <a href="">
              <svg-icon icon-class="svg-tg-sd" class="img" />
              <span class="label">入口1</span>
            </a>
          </div>
          <div class="item">
            <a href="">
              <svg-icon icon-class="svg-tg-sd" class="img" />
              <span class="label">入口2</span>
            </a>

          </div>
          <div class="item">
            <a href="">
              <svg-icon icon-class="svg-tg-sd" class="img" />
              <span class="label">入口3</span>
            </a>

          </div>
          <div class="item">
            <a href="/parking/pay">
              <svg-icon icon-class="svg-tg-sd" class="img" />
              <span class="label">入口4</span>
            </a>

          </div>
        </div>
      </div>
    </div>
    <!--*********-->
    <template>
      <div class="message-container">
        <!-- 发布新公告的按钮 -->
        <el-button type="primary" @click="openDialog"
                   style="float: left; margin-bottom: 18px">发布新公告</el-button>

        <!-- 消息公告表格 -->
        <el-table :data="messageList" height="550" style="width: 100%" class="custom-table">
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="content" label="消息公告" class-name="message-column"></el-table-column>
          <el-table-column label="操作" width="100">
            <template v-slot="scope">
              <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 发布新公告对话框 -->
      <el-dialog title="发布新公告" :visible.sync="dialogVisible">
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item label="公告内容" prop="content">
            <el-input type="textarea" v-model="form.content" :rows="8" ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitNewAnnouncement">发布</el-button>
        </span>
      </el-dialog>
    </template>
  </div>
</template>
<script>

import {delAnnouncementAPI, getAnnouncementAPI, issueAnnouncementAPI} from "@/api/announcement/announcement";
import {DATA_OK_NUM} from "@/constants/KEY";

export default {
  data() {
    return {
      messageList: [],
      dialogVisible: false, //发布新公告对话框的显示
      form: {
        content: ''
      },
      rules: {
        content: [
          { required: true, message: '请输入公告内容', trigger: 'blur' },
        ]
      }
    };
  },
  created() {
    this.getMessages();
  },
  methods: {
    getMessages() {
      getAnnouncementAPI().then((res) =>{
        // console.log('message: ',res)
        this.messageList = res.data
      })
    },
    handleDelete(scope) {
      this.$confirm('确定要删除这条消息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const { $index, row } = scope;
        const deletedId = row.id; // 获取被删除元素的ID
        delAnnouncementAPI(deletedId).then((res) => {
          // console.log(res.data)
          if (res.data === DATA_OK_NUM) {
            this.messageList.splice($index, 1);
            this.showMessage('删除成功!', 'success');
          } else {
            this.showMessage('删除失败！', 'error');
          }
        }).catch(() => {
          this.showMessage('删除失败！', 'error');
        });
      }).catch(() => {
        this.showMessage('删除取消！', 'warning');
      });
    },
    showMessage(message, type) {
      this.$message({
        type: type,
        message: message
      });
    },

    // 打开发布公告对话框
    openDialog() {
      this.dialogVisible = true;
    },
    // 关闭发布公告对话框
    closeDialog() {
      this.dialogVisible = false;
      this.form.content = ''
    },

    // 确认发布新公告
    submitNewAnnouncement() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过，可以执行提交逻辑,发送数据到服务器
          issueAnnouncementAPI(this.form).then((res) =>{
            // console.log('issueAnnouncement: ',res)
            if(res.data === DATA_OK_NUM){
              this.closeDialog()
              this.getMessages();
              this.showMessage('发布新公告成功！', 'success');
            }else {
              this.showMessage('添加公告失败！', 'error');
            }
          }).catch(() => {
            this.showMessage('添加公告失败！', 'error');
          });
        } else {
          // 表单验证失败，可以显示错误提示
          this.$message({
            type: 'error',
            message: '公告内容不能为空！'
          });
          return false;
        }
      });
    }

  }
}
</script>


<!--scoped-->
<style  lang="scss">
.income-container {
  display: flex;
  font-size: 16px;
  padding: 20px;
  background-color: #f5f5f5;
}

.left-wrapper {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  min-width: 850px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

//.title { //在不启用scoped时，屏蔽此样式
//  font-size: 18px;
//  color: #333;
//  font-weight: 600;
//  margin-bottom: 15px;
//}

.pard-data {
  display: flex;
  justify-content: space-between;

  .item {
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border-radius: 6px;

    .value {
      color: #333;
      font-weight: 600;
      font-size: 24px;
    }

    .label {
      color: #666;
      margin-top: 8px;
    }
  }
}

.right-wrapper {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  min-width: 260px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.quick-entry-title {
  font-size: 16px;
  color: #333;
  font-weight: 600;
  margin-bottom: 15px;
}

.fast-enter {
  display: flex;
  justify-content: space-around;

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    border-radius: 6px;

    .img {
      width: 44px;
      height: 44px;
      margin-bottom: 9px;
    }

    .label {
      color: #666;
    }
  }
}

// 美化消息列表样式
.message-container {
  margin-top: 30px; // 给消息容器添加一些顶部边距
  background-color: #ccc; // 设置背景颜色
  border-radius: 8px; // 添加圆角边框
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // 添加阴影效果
  padding: 20px; // 添加内边距
}

//修改鼠标悬停颜色
.el-table tbody tr:hover > td {
  background-color: goldenrod !important;
}

.custom-table {
  border-collapse: collapse; // 确保边框合并
  margin: 0; // 移除默认边距

  &::before,
  &::after {
    background-color: transparent; // 移除默认边框样式
  }

  .el-table__header-wrapper {
    thead {
      tr {
        th {
          background-color: cornflowerblue; // 设置表头背景颜色
          color: black; // 设置表头文字颜色
          font-weight: bold; // 设置表头文字加粗
          border: none; // 移除表头边框
          font-size: 22px;
        }
      }
    }
  }

  .el-table__row {
    background-color: #f9f9f9; // 设置行背景颜色
    border: 1px solid #ebeef5; // 设置行边框
    //cursor: pointer; // 设置鼠标悬停效果

    //&:hover {
    //  background-color: goldenrod; // 设置悬停时的背景颜色
    //}

    td {
      border-bottom: none; // 移除单元格底部边框
    }
  }

  .message-column {
    color: #606266; // 设置消息列文字颜色
    font-size: 18px; // 设置消息列文字大小
  }
}

//快捷入口样式调整
.fast-enter {
  .item {
    &:hover {
      background-color: greenyellow; // 设置悬停时的背景颜色
      .label {
        color: #409eff; // 设置悬停时文字颜色
      }
    }
  }
}
</style>
